<template>
  <div id="supervisionInformationDetail" v-loading="mainLoading" class="app-container">
    <div class="mainBox"> 
      <div class="leftBox">
        <div class="leftBox_title">
          {{nowType==1?'踏勘片块信息':'前期片块信息'}}
        </div>
        <div class="leftBox_title_sub">
          <div class="leftBox_title_sub_piankuai leftBox_title_sub_text"><span>片块名：</span>{{mainData.landName}}</div>
          <div class="leftBox_title_sub_shijian leftBox_title_sub_text"><span>{{nowType==1?'踏勘时间':'测绘时间'}}：</span>{{mainData.time}}</div>
        </div>
        <div class="checkOut" v-if="nowType==1">
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked">是否符合土地利用规划？</el-checkbox>
          </div>
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked1">是否符合土地整治规划？</el-checkbox>
          </div>
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked2">是否符合乡镇建设规划？</el-checkbox>
          </div>
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked3">坡度是否大于25度？</el-checkbox>
          </div>
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked4">土地权利人是否自愿申请？</el-checkbox>
          </div>
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked5">是否与周边农用地相连？</el-checkbox>
          </div>
        </div>
        <div class="leftBox_line"></div>
        <div class="fujianBox">
          
          <div class="fujianList" v-if="list.length!=0">
            <div class="fujianList_item" v-for="(item,index) in list" :key="index">
              <div class="fujianList_item_left">{{item.name}}</div>
              <div class="fujianList_item_right" @click="seeImg(item, index)">查看</div>
            </div>
          </div>
          <div class="fujianList fujianNoData" v-else>
            暂无数据
          </div>
        </div>
      </div>
      <div class="rightBox">
        <tdMap style="height: 600px" class="mapBox_right" ref="tdMap" :pkList="mainDataData" :isShowControls="false" />
      </div>
    </div>
    <!-- <div class="boxTitle">
      <div class="boxTitle_title">{{mainData.landName}}</div>
      <div class="boxTitle_time">{{typeText}}时间：{{mainData.time}}</div>
      <div class="checkOut" v-if="nowType==1">
        <div class="checkOut_item">
          <el-checkbox :disabled="true" v-model="checked">是否符合土地利用规划？</el-checkbox>
        </div>
        <div class="checkOut_item">
          <el-checkbox :disabled="true" v-model="checked1">是否符合土地整治规划？</el-checkbox>
        </div>
        <div class="checkOut_item">
          <el-checkbox :disabled="true" v-model="checked2">是否符合乡镇建设规划？</el-checkbox>
        </div>
        <div class="checkOut_item">
          <el-checkbox :disabled="true" v-model="checked3">坡度是否大于25度？</el-checkbox>
        </div>
        <div class="checkOut_item">
          <el-checkbox :disabled="true" v-model="checked4">土地权利人是否自愿申请？</el-checkbox>
        </div>
        <div class="checkOut_item">
          <el-checkbox :disabled="true" v-model="checked5">是否与周边农用地相连？</el-checkbox>
        </div>
      </div>
    </div>
    <div class="boxItem">
      <div class="boxItem_title">
        <span class="tit">{{nowType==1?'踏勘指界现场位置信息':'前期测绘现场位置信息'}}</span>
      </div>
      <div class="boxItem_content">
        <tdMap style="height: 600px" class="mapBox_right" ref="tdMap" :pkList="mainDataData" :isShowControls="false" />
      </div>
    </div>
    <div class="boxItem">
      <div class="boxItem_title">
        <span class="tit">{{nowType==1?'踏勘指界现场位置信息':'前期测绘方位角信息'}}</span>
      </div>
      <div class="boxItem_content" style="padding-top:30px;" v-if="nowType==1">
        <el-table :header-cell-style="{background:'#f9f9f9',color:'#606266'}" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
          <el-table-column type="index" align="center" label="序号" width="120"></el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="seeImg(scope.row, scope.$index)" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="boxItem_content" style="padding-top:30px;" v-if="nowType==2">
        <el-table :header-cell-style="{background:'#f9f9f9',color:'#606266'}" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
          <el-table-column type="index" align="center" label="序号" width="120"></el-table-column>
          <el-table-column label="文件名称">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="seeImg(scope.row, scope.$index)" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div> -->
    <el-dialog title="查看图片" :visible.sync="imgShow" :before-close="handleClose" class="imgDaolig">
      <div class="imgBox" style="width:500px;height:500px;margin:0 auto;">
        <img style="width:100%;height:100%;" :src="$https+imgSrc" alt />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="imgShow = false">取 消</el-button>
        <el-button type="primary" @click="imgShow = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" title="查看全景图" :visible.sync="panoramaPopup" class="seeImgBox">
      <div ref="panorama" class="imgBox" style="text-align:center;width:100%;height:500px"></div>
    </el-dialog>
  </div>
</template>

<script>
import PhotoSphereViewer from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
import { supervisingInfo, earlySupervisingInfo, earlyEnterpriseCheck, earlyEnterpriseCheckQianqi, getLandStatusMapAuditInfo } from "@/api/siteSurveyEarlyStage";
import mapInit from "@/api/mapConfig";
import tdMap from "@/components/tdMap";
export default {
  components: {
    tdMap
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      //综合监管信息附件类型切换
      fujianType:1,

      imgSrc: "",
      imgShow: false,
      mainLoading: false,
      activeName: "1",
      list: [],
      listLoading: false,
      listQuery: {
        page: 1,
        size: 10,
        projectId: 27,
        landId: "",
        applicantName: "",
        startTime: "",
        endTime: ""
      },
      total: 0, //总数
      landId: "", //片块ID
      mainData: "",
      typeText: "现场勘查",
      checked: true, //是否符合土地利用规划
      checked1: true, //是否符合土地整治规划
      checked2: true, //是否符合乡镇建设规划
      checked3: true, //坡度是否大于25度
      checked4: true, //土地权利人是否自愿申请
      checked5: true, //是否与周边农用地相连
      nowType: 1,
      mainDataData: [],
      panoramaPopup: false,
      panoramaImg: require("@/assets/pure-house.jpg")
    };
  },
  mounted() {
    this.landId = this.$route.query.id;
    this.nowType = this.$route.query.type;
    this.getDetail();
  },
  methods: {
    //切换附件类型事件
    changeFujianType(type){
      this.fujianType=type
      console.log(this.list)
      if(type==3||type==4){

      }
    },

    handleClose() {
      this.imgShow = false;
    },
    //查看图片
    seeImg(row, index) {
      const that = this;
      if (index != 4) {
        this.imgShow = true;
        this.imgSrc = row.src;
      } else {
        this.panoramaPopup = true;
        if (!this.$refs.panorama) {
          this.$nextTick(() => {
            PhotoSphereViewer({
              panorama: this.panoramaImg,
              container: this.$refs.panorama,
              time_anim: 3000,
              navbar: true,
              navbar_style: {
                backgroundColor: "rgba(58, 67, 77, 0.7)"
              }
            });
          });
        }
      }
    },
    //获取详情
    getDetail() {
      this.mainLoading = true;
      var data = {
        landId: this.landId
      };
      getLandStatusMapAuditInfo(data).then(res => {
        let obj = res.data;
        let array = [];
        array.push(obj);
        this.mainDataData = array;
      });
      if (this.nowType == 1) {
        this.typeText = "现场勘查";
        earlyEnterpriseCheck(data)
          .then(res => {
            this.mainLoading = false;
            console.log(res, "详情都嘛-现场");
            this.mainData = res.data;
            if (res.data.photo1 != null && res.data.photo1 != "") {
              var index=res.data.photo1.indexOf(".")
              var photo1Type=res.data.photo1.substring(index,res.data.photo1.length) 
              console.log(str,"截取后的长度")
              this.list.push({ name: "六方指界书"+photo1Type, src: res.data.photo1,flag:true, });
            }
            if (res.data.photo2 != null && res.data.photo2 != "") {
              var index=res.data.photo2.indexOf(".")
              var photo2Type=res.data.photo2.substring(index,res.data.photo2.length) 
              this.list.push({ name: "六方到场合照"+photo2Type, src: res.data.photo2,flag:true, });
            }
            this.checked = res.data.lygh == "YES" ? true : false; //是否符合土地利用规划
            this.checked1 = res.data.zzgh == "YES" ? true : false; //是否符合土地整治规划
            this.checked2 = res.data.xzjsgh == "YES" ? true : false; //是否符合乡镇建设规划
            this.checked3 = res.data.pddy == "YES" ? true : false; //坡度是否大于25度
            this.checked4 = res.data.qlrzysq == "YES" ? true : false; //土地权利人是否自愿申请
            this.checked5 = res.data.zbnyd == "YES" ? true : false; //是否与周边农用地相连

            var shepiArr = [];
            if (res.data.coorDonate != null && res.data.coorDonate != "") {
              shepiArr = res.data.coorDonate.split(",");
            }
            var newArr = [];
            newArr.push(shepiArr);
            this.mainData.coorDonate = newArr;

            this.initMap();
          })
          .catch(error => {
            this.mainLoading = false;
          });
      } else {
        this.typeText = "前期测绘";
        earlyEnterpriseCheckQianqi(data)
          .then(res => {
            this.mainLoading = false;
            console.log(res, "详情都嘛-前期");

            this.mainData = res.data;

            if (res.data.landPositionOneFilePath != null && res.data.landPositionOneFilePath != "") {
              var index=res.data.landPositionOneFilePath.indexOf(".")
              var landPositionOneFilePathType=res.data.landPositionOneFilePath.substring(index,res.data.landPositionOneFilePath.length) 
              this.list.push({ name: "复垦点方位一照片"+landPositionOneFilePathType, src: res.data.landPositionOneFilePath, });
            }
            if (res.data.landPositionTwoFilePath != null && res.data.landPositionTwoFilePath != "") {
              var index=res.data.landPositionTwoFilePath.indexOf(".")
              var landPositionTwoFilePathType=res.data.landPositionTwoFilePath.substring(index,res.data.landPositionTwoFilePath.length)
              this.list.push({ name: "复垦点方位二照片"+landPositionTwoFilePathType, src: res.data.landPositionTwoFilePath });
            }
            if (res.data.landPositionThreeFilePath != null && res.data.landPositionThreeFilePath != "") {
              var index=res.data.landPositionThreeFilePath.indexOf(".")
              var landPositionThreeFilePathType=res.data.landPositionThreeFilePath.substring(index,res.data.landPositionThreeFilePath.length)
              this.list.push({ name: "复垦点方位三照片"+landPositionThreeFilePathType, src: res.data.landPositionThreeFilePath });
            }
            if (res.data.landPositionFourFilePath != null && res.data.landPositionFourFilePath != "") {
              var index=res.data.landPositionFourFilePath.indexOf(".")
              var landPositionFourFilePathType=res.data.landPositionFourFilePath.substring(index,res.data.landPositionFourFilePath.length)
              this.list.push({ name: "复垦点方位四照片"+landPositionFourFilePathType, src: res.data.landPositionFourFilePath });
            }
            if (res.data.panoramagramFilePath != null && res.data.panoramagramFilePath != "") {
              var index=res.data.panoramagramFilePath.indexOf(".")
              var panoramagramFilePathType=res.data.panoramagramFilePath.substring(index,res.data.panoramagramFilePath.length)
              this.list.push({ name: "空中全景照片"+panoramagramFilePathType, src: res.data.panoramagramFilePath });
            }

            if (res.data.trackRecord != null && res.data.trackRecord != "") {
              var shepiArr = JSON.parse(res.data.trackRecord);
              var newArr = [];
              shepiArr[0].locationList.forEach(item => {
                var arrItem = [];
                arrItem[0] = item.longitude;
                arrItem[1] = item.latitude;

                newArr.push(arrItem);
              });
              console.log(newArr, "12323");

              this.mainData.coorDonate = newArr;
            }
          })
          .catch(error => {
            this.mainLoading = false;
          });
      }
    }
  }
};
</script>
<style scoped>
#supervisionInformationDetail {
  padding: 30px;
  box-sizing: border-box;
  padding-left: 130px;
  padding-right: 100px;
}
#supervisionInformationDetail .boxItem {
  width: 100%;
  background-color: #fff;
}
#supervisionInformationDetail .boxItem_title {
  width: 100%;
  background: #f8f8f8;
  height: 50px;
  border: 1px solid #efefef;
  overflow: hidden;
  color: #333;
  font-size: 18px;
  font-weight: bold;
  text-indent: 20px;
  line-height: 50px;
}
#supervisionInformationDetail .boxItem_content {
  width: 100%;
  border: 1px solid #ebebeb;
  border-top: none;
  padding: 30px;
  padding-top: 0;
  box-sizing: border-box;
}
#supervisionInformationDetail .boxItem_content .mapBox_right {
  width: 950px;
  height: 600px;
  margin-top: 30px;
}
#supervisionInformationDetail .boxItem_content_row {
  display: flex;
  align-items: center;
}
#supervisionInformationDetail .boxItem_content_row_item {
  display: flex;
  align-items: center;
}
#supervisionInformationDetail .boxItem_content_row_item {
  margin-right: 30px;
}
#supervisionInformationDetail .boxItem_content_row_item p {
  font-size: 14px;
  line-height: 36px;
}
#supervisionInformationDetail .boxItem_content_row_item p:first-child {
  color: #444;
  font-weight: bold;
}
#supervisionInformationDetail .boxItem_content_row_item p:last-child {
  color: #666;
}
#supervisionInformationDetail .uploadDownLoadBox_item p {
  width: 140px;
}
#supervisionInformationDetail .button_box {
  margin-top: 30px;
}
#supervisionInformationDetail .button_box_item {
  margin-right: 10px;
}
#supervisionInformationDetail .errorBox .el-dialog {
  width: 800px;
}
#supervisionInformationDetail .piankuaixinxi .title {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  border: 1px solid #ebeef5;
  border-bottom: none;
  border-top: none;
}
#supervisionInformationDetail .piankuaixinxi .title1 {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  border: 1px solid #ebeef5;
  border-bottom: none;
}
#supervisionInformationDetail .boxTitle {
  margin-bottom: 30px;
}
#supervisionInformationDetail .boxTitle .boxTitle_title {
  font-size: 20px;
  font-weight: bold;
  color: #444;
  text-align: center;
}
#supervisionInformationDetail .boxTitle_time {
  font-size: 14px;
  color: #999;
  margin-top: 20px;
  margin-bottom: 30px;
}
#supervisionInformationDetail .checkOut_item {
  margin-bottom: 10px;
}
#supervisionInformationDetail /deep/ .el-checkbox__input.is-disabled + span.el-checkbox__label {
  border-color: #409eff;
}
#supervisionInformationDetail /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  border-color: #409eff;
  background-color: #409eff;
}
#supervisionInformationDetail /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: #fff;
}
#supervisionInformationDetail /deep/ .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #12203e;
}

.mainBox{
  width: 100%;
  display: flex;
}
.leftBox{
  width: 40%;
}
.leftBox_title{
  color: #4D4D4D;
  font-size:18px;
  font-weight:bold;
  line-height:25px;
}
.leftBox_title_sub{
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.leftBox_title_sub .leftBox_title_sub_piankuai{
  margin-right: 40px;
}
.leftBox_title_sub .leftBox_title_sub_text{
  color: #595959;
  font-size: 14px;
}
.leftBox_title_sub_text span{
  color: #737373;
}
.leftBox_line{
  width:80%;
  height:1px;
  background:rgba(235,238,245,1);
  opacity:1;
  margin-top: 30px;
  margin-bottom: 14px;
}
.fujianBox_tabs{
  display: flex;
  align-items: center;
}
.fujianBox_tabs_item{
  width:60px;
  height:28px;
  background:#F0F3F5;
  opacity:1;
  border-radius:2px;
  color: #696969;
  font-size: 14px;
  margin-right: 8px;
  text-align: center;
  line-height: 28px;
  cursor: pointer;
}
.fujianBox_tabs_item.on{
  background:#409EFF;
  color: #fff;
}
.fujianList{
  width: 70%;
  margin-top: 14px;
}
.fujianList_item{
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 56px;
  line-height: 56px;
}
.fujianList_item .fujianList_item_left{
  color: #606266;
  font-size: 14px;
}
.fujianList_item .fujianList_item_right{
  color: #409EFF;
  font-size: 14px;
  cursor: pointer;
}
.rightBox{
  width: 45%;
}
.fujianNoData{
  text-align: center;
  margin-top: 50px;
  letter-spacing: 8px;
  color: #696969;
}
</style>
